<template>
  <div>
     <h1>首页</h1>
  </div>
</template>
<script setup  lang="ts">
import {ref,reactive} from 'vue'
// 定义接口
  let mywindow:IWindow={
    width:"张三",
    height:"李四"
  }
  // vue3 约束ref的数据 泛型写法 ref<>()
  let myname=ref<string>("玛丽莲梦露")
  // myname.value=88 //报错
  let videoFlag=ref<boolean>(true)
  
  let myarr=ref<Array<string|number>>(["周一","周二","周三",99,88])

  // any 任意类型   
  let myres=ref<any>(null)

// 2. reactive的ts约束写法  泛型写法 reactive<>() 
// 泛型 动态类型
// type和interface 约束对象 约束reactive
interface Istate {
  name:string,
  readonly age:number, //只读属性 不能修改
  price:number,
  flag:boolean,
  color?:string, // ts可选属性 
  arr:Array<string|number>
}
let state=reactive<Istate>({
  name:"q7",
  age:12,
  price:2000,
  flag:true,
  arr:["周一",18,99]
})
// state.age=89;  //age 是只读属性
type Iperson={
  name:string,
  age:number,
  sex:string,
  say(sname:string):string,
  run(km:number):number
}
let myobj=reactive<Iperson>({
  name:"张敬轩",
  age:18,
  sex:"男",
  say:(sname:string)=>{
    console.log("hello 世界")
    return "老弟"
  },
  run:(km:number)=>{
    return 1888
  }
  
})

</script>